<script setup>
import {useFullscreen} from '@vueuse/core'
import {router, usePage} from '@inertiajs/vue3'
import http from '@/lib/http'

import AppSearch from './AppSearch.vue'
import {Message} from "@arco-design/web-vue";

const { isFullscreen, toggle: toggleFullScreen } = useFullscreen()
const page = usePage();
const userInfo = page.props.auth?? {};


const handleClickWeb = async () => {
    window.open('/', '_blank')
}
const handleTheme = () => {
}

const handleRefresh = () => {
    router.reload({
        preserveScroll: true
    })
}
const handleUserInfo = () => {
    router.visit('/admin/dashboard/user')
}

const handleLogout = () => {
    router.get('/admin/logout')
}

const handleClearCache = async () => {
    await http.post('/admin/clear-rules-cache')
    handleRefresh()
    Message.success('菜单缓存清除成功')
}
</script>

<template>
    <div class="navbar flex flex-col shrink-0 bg-white" >
        <div class="nav h-[60px] flex justify-between gap-4 pr-6">
            <div class="flex-1 flex items-center gap-4 overflow-hidden">
                <AppSearch />

                <a-button class="nav-btn shrink-0" shape="circle" type="outline" @click="handleRefresh()">
                    <template #icon>
                        <icon-refresh/>
                    </template>
                </a-button>

                <!--                <a-button class="nav-btn shrink-0" shape="circle" type="outline" @click="handleTheme()">-->
                <!--                    <template #icon>-->
                <!--                        <icon-command/>-->
                <!--                    </template>-->
                <!--                </a-button>-->

                <!--                <a-button class="nav-btn shrink-0" shape="circle" type="outline" @click="handleTheme()">-->
                <!--                    <template #icon>-->
                <!--                        <icon-common/>-->
                <!--                    </template>-->
                <!--                </a-button>-->

                <a-button class="nav-btn shrink-0" shape="circle" type="outline" @click="handleClearCache()">
                    <template #icon>
                        <icon-delete />
                    </template>
                </a-button>
            </div>

            <div class="flex shrink-0 items-center gap-4">
                <a-button class="nav-btn" shape="circle" type="outline" @click="handleClickWeb()">
                    <template #icon>
                        <icon-desktop/>
                    </template>
                </a-button>

                <a-button class="nav-btn" shape="circle" type="outline" @click="handleTheme()">
                    <template #icon>
                        <icon-message/>
                    </template>
                </a-button>

                <a-button class="nav-btn" shape="circle" type="outline" @click="toggleFullScreen">
                    <template #icon>
                        <icon-fullscreen-exit v-if="isFullscreen"/>
                        <icon-fullscreen v-else/>
                    </template>
                </a-button>

                <a-dropdown trigger="click">
                    <a-avatar :size="32" :style="{ backgroundColor: '#006cff' }" class="cursor-pointer">
                        <img :src="userInfo.avatar ?? '/static/images/avatar.png'" alt="avatar"/>
                    </a-avatar>
                    <template #content>
                        <a-doption>
                            <a-space @click="handleUserInfo">
                                <icon-user/>
                                <span> 用户中心 </span>
                            </a-space>
                        </a-doption>
                        <a-doption>
                            <a-space @click="handleLogout">
                                <icon-export/>
                                <span> 退出登录 </span>
                            </a-space>
                        </a-doption>
                    </template>
                </a-dropdown>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.navbar {
    position: relative;
    z-index: 20; /* 高于侧边栏确保阴影覆盖 */
    box-shadow:
        0 4px 8px -4px rgba(0, 0, 0, 0.1), /* 底部阴影 */
        0 1px 0 0 rgba(0, 0, 0, 0.05);     /* 细线增强边缘感 */
}
.nav-btn{
    border-color: var(--color-border) !important;
    color: var(--color-text-2)  !important;
    background-color: var(--color-fill-2)  !important;
    font-size: 16px;
    border: none;

    &:hover {
        color: var(--color-text-1)  !important;
        border-color: var(--color-border)  !important;
        background-color: var(--color-fill-3)  !important;
    }
}
</style>
